import { useDispatch } from 'react-redux';
import styles from './CardAccount.module.scss';
import { MdOutlineDelete } from 'react-icons/md';
import { deleteAccountById, getAccountAll, getAccountById } from '../../features/account/account';
import { Link, useNavigate } from 'react-router-dom';
import { ROUTES } from '../../utils/conts';
import { getCookie } from '../../utils';

const CardAccount = ({ id, firstName, lastName, email }) => {
  const dispatch = useDispatch();
  const navigate = useNavigate();
  const userCookieId = getCookie('id');
  const handleClickDelete = () => {
    if (Number(userCookieId) !== Number(id)) return;
    dispatch(deleteAccountById(id));
    dispatch(getAccountAll());
  };

  const handleClickUpdate = () => {
    const myCookieValueId = getCookie('id');

    if (Number(userCookieId) === Number(id)) {
      navigate(ROUTES.UPDATE_USER);
      dispatch(getAccountById(myCookieValueId));
    }
  };
  return (
    <div className={styles.card}>
      {Number(userCookieId) !== Number(id) ? null : (
        <div className={styles.wrapper}>
          <p className={styles.update} onClick={handleClickUpdate}>
            Обновить
          </p>
          <MdOutlineDelete onClick={handleClickDelete} className={styles.delete} />
        </div>
      )}

      <div>
        <p>Имя: {firstName}</p>
        <p>Фамилия: {lastName} </p>
        <p>Email: {email}</p>
      </div>
    </div>
  );
};

export default CardAccount;
